:root {
    --accent: #3CB9FC;
    --light: #B537F2;
    --main: #A8249C;
    --dark: #190671;
    --accent2: #F5CB43;

}

body {
    font-family: 'Roboto', sans-serif;
    background-color: white;
    color: black;

}

h2 {
    line-height: 80%;
}

.anchor {
    position: relative;
}

.anchortotop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
}

.mainscreen {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    scroll-behavior: smooth;
}

.mainscreen::-webkit-scrollbar {
    display: none;
}


h1, h2, h3 {
    font-family: 'Staatliches', cursive;
}

.section {
    min-height: 100vh;
}

.specialtext {
    font-weight: bold;
}

.navbar-brand {
    color: white;
}

.navbar-nav .nav-link.active, .nav-link {
    color: white;
}

.specialfont {
    font-size: calc(1.375rem + 7vw);
    line-height: 80%;
}

.specialfonthighlight {
    color: var(--main);
}

.althiglight{
    color: var(--accent2);
}

.mainbg {
    background-color: var(--main);
    color: white;
}

.gradientbg {
    background-image: linear-gradient(to right, var(--main), var(--dark));
    color: white;
}

.darkbg {
    background-color: var(--dark);
    color: white;
}

.lightbg {
    background-color: var(--light);
    color: white;
}

.whitebg {
    background-color: white;
    color: white;
}

.accentbg {
    background-color: var(--accent);
    color: black;
}

.fancyboxeffect {
    box-shadow: 5px 5px black;
}

.funedge {
    border-radius: 1rem;
}

.standardimg {
    width: 100%;
    height: auto;
}

.iconimg {
    width: 50px;
    height: auto;
}

.sticktobot {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}




.hideori {
    opacity: 0;
}

.hidetillscroll {
    opacity: 0;
}


.fadefromleft1 {
    animation: 1s ease-in-out 0s 1 forwards slideInFromLeft;
}

.fadefromleft2 {
    animation: 1s ease-in-out 0.2s 1 forwards slideInFromLeft;
}

.fadefromleft3 {
    animation: 1s ease-in-out 0.4s 1 forwards slideInFromLeft;
}

.fadefromleft4 {
    animation: 1s ease-in-out 0.6s 1 forwards slideInFromLeft;
}

.fadefromtop1 {
    animation: 1s ease-in-out 0s 1 forwards slideInFromTop;
}

.fadefromtop2 {
    animation: 1s ease-in-out 0.2s 1 forwards slideInFromTop;
}

.fadefromtop3 {
    animation: 1s ease-in-out 0.4s 1 forwards slideInFromTop;
}

.fadefromtop4 {
    animation: 1s ease-in-out 0.6s 1 forwards slideInFromTop;
}

.fadein {
    animation: 1s ease-in-out 0s 1 forwards FadeIn;
}

.fadein2 {
    animation: 1s ease-in-out 0.2s 1 forwards FadeIn;
}

.fadein3 {
    animation: 1s ease-in-out 0.4s 1 forwards FadeIn;
}

.fadein4 {
    animation: 1s ease-in-out 0.6s 1 forwards FadeIn;
}

.fadeout {
    animation: 1s ease-in-out 0s 1 forwards FadeOut;
}

.fadetoright {
    animation: 1s ease-in-out 0s 1 forwards SlidetoRight;
}

.noticemeeffect {
    animation: 2s ease-in-out 0s infinite forwards slideInFromTop;
}

.blinkinandout1 {
    animation: 8s ease-in-out 0s infinite forwards blinking;
}

.blinkinandout2 {
    animation: 8s ease-in-out 2s infinite forwards blinking;
}

.blinkinandout3 {
    animation: 8s ease-in-out 4s infinite forwards blinking;
}

.blinkinandout4 {
    animation: 8s ease 6s infinite forwards blinking;
}

.wibbly {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: wibble 1s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

.wobbly {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: wobble 0.5s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

.pauseanimationon:hover {

    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.stupidimg{
    width: 100%;
    height: auto;
}

.softborder{
    border-radius: 1rem;
}



.carouselcontainer{
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100vw 
}
.specialimg {
    height: 100vh;
    width: auto;
    object-position: end;
}



.specialsection {
    height: 100vh;
    overflow: hidden;
}

.specialimgcase1 {
    min-height: 25vh;

}


.clickable {
    transition: 0.5s;
    cursor: pointer;
}

.clickable:hover {
    transition: 0.5s;
    transform: scale(1.05);
}

.clickablebutton {
    transition: 0.5s;
    cursor: pointer;
}

.clickablebutton:hover {
    transition: 0.5s;
    background-color: white;
    color: var(--dark);
}

.nostyle {
    color: white;
    text-decoration: none;
}

.nostyle:hover {
    color: white;
    text-decoration: none;
}

.buttonstyle1{
    transition: 0.5s;
    background-color: var(--light);
    color: white;
    border: 1px solid transparent;
}
.buttonstyle1:hover{
    transition: 0.5s;
    background-color: var(--main);
    color: white;
    border: 1px solid transparent;
}



@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes SlidetoRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes FadeIn {
    0% {
        opacity: 0;

    }

    100% {
        opacity: 1;

    }
}

@keyframes FadeOut {
    0% {
        opacity: 1;

    }

    100% {
        opacity: 0;

    }
}

@keyframes wibble {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    40% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    50% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    60% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    70% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    80% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    90% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes wobble {
    0% {
        transform: translate(-1px, -1px) rotate(0deg);
    }

    10% {
        transform: translate(1px, 2px) rotate(1deg);
    }

    20% {
        transform: translate(3px, 0px) rotate(-1deg);
    }

    30% {
        transform: translate(-3px, -1px) rotate(0deg);
    }

    40% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    50% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    60% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    70% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    80% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    90% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}


@keyframes blinking {
    0% {
        filter: opacity(0);
    }

    20% {
        filter: opacity(0);
    }

    40% {
        filter: opacity(1);
    }

    60% {
        filter: opacity(1);
    }

    80% {
        filter: opacity(0);
    }

    100% {
        filter: opacity(0);
    }

}

.m-scroll {
    display: flex;
    position: relative;
    width: 100vw;
    height: 25vh;
    margin: auto;
    background-color: transparent;
    overflow: hidden;
    z-index: 1;
}

.m-scroll__title {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    transform: scale(2);
    transition: all 1s ease;
}

.m-scroll__title>div {
    display: flex;
    -webkit-animation: scrollText 33s infinite linear;
    animation: scrollText 33s infinite linear;
}

.m-scroll__title h1 {
    margin: 0;
    font-size: 15vh;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2);
    transition: all 4s ease;
}

.m-scroll__title a {
    text-decoration: none;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2);
    color: transparent;
}

.m-scroll__title a:hover {

    color: #ffffff;
}

/*div:hover {
    animation-play-state: paused;
  }*/
@-webkit-keyframes scrollText {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes scrollText {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-50%);
    }
}

logo-slider {
    --image-size: 30vh;
    border: transparent;
    padding: 20px;
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
}

logo-slider:hover div {
    animation-play-state: paused;
    
}

logo-slider div {
    display: flex;
    position: relative;
    animation: marquee 20s linear infinite;
    justify-content: space-around;
}

logo-slider img {
    display: block;
    min-width: var(--image-size);
    height: var(--image-size);
    margin: 5px 5px;
}

logo-slider:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: transparent;
}

.test{
    border: 1px solid white;
}

input{
    background-color: white;
    border: none;
    width: 100%;
    padding: 1%;
    color: rgba(0, 0, 0, 0.507);
}
textarea{
    width: 100%;
    min-height: 10vh;
}



@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}